<template>
  <div class="common-card">
    <div class="video-cover-container">
      <el-image :src="videoInfo.cover" class="video-cover" fit="cover" />
      <div class="play-overlay">
        <el-icon class="play-icon">
          <VideoPlay />
        </el-icon>
      </div>
    </div>
    <div style="padding: 10px">
      <p class="link-text video-title">
        {{ videoInfo.title }}
      </p>
      <el-text size="small">
        {{videoInfo.description}}
      </el-text>
      <div class="flex-between">
        <el-space>
          <el-icon>
            <View/>
          </el-icon>
          <el-text>{{ videoInfo.viewCount }}次</el-text>
        </el-space>
        <el-space>
          <el-icon>
            <Timer/>
          </el-icon>
          <el-text>
            {{ $formatTimeAgo(videoInfo.createTime) }}
          </el-text>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { View, Timer, VideoPlay } from "@element-plus/icons-vue";

const props = defineProps({
  videoInfo: {
    type: Object,
    default: () => ({})
  }
});

const videoInfo = reactive(props.videoInfo);
</script>

<style scoped>

.video-cover-container {
  position: relative;
  height: 160px;
  overflow: hidden;
  border-radius: 4px;
}

.video-cover {
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease;
}

.video-cover-container:hover .video-cover {
  filter: brightness(0.7);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-cover-container:hover .play-overlay {
  opacity: 1;
}

.play-icon {
  color: white;
  font-size: 48px;
  transition: transform 0.3s ease;
}

.video-cover-container:hover .play-icon {
  transform: scale(1.1);
}

.video-title {
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
